<template>
  <div class="center-container" style="margin-top: 20px">
    <div class="content-container">
      <el-row :gutter="10">
        <el-col :span="18">
          <el-card>
            <el-button @click="router.push('/allgames/Games')" class="nav-button" style="width: 80px">{{
                good.game
              }}
            </el-button>
            <br>
            <img :src="good.type" alt="" style="width: 30px;position: relative;top: 10px">
            <span style="font-size: 14px;color: #666;line-height: 40px">{{ good.platform }}</span>
            <el-button
                style="border: #5468ff solid 1px;border-radius: 3px;background-color: #fff;color: #5468ff;height: 14px;width: 60px;margin-left: 10px">
              支持包赔
            </el-button>
            <br>
            <span style="color: #333;font-size: 18px">{{ good.describe }}</span>
            <br>
            <br>
            <br>
            <span style="font-size: 14px;color: #666">商品编号{{ good.id }}</span>
            <span style="font-size: 14px;color: #666;margin-left: 200px">上架时间{{ good.createTime }}</span>
            <span style="font-size: 24px;color: red;margin-left: 300px">¥{{ good.price }}</span>
            <hr style="border: #f0f0f0 solid 1px  ">
            <el-button style="border: none" @click="showTransactionDialog">
              <span style="font-size: 14px;color: #666">交易流程：</span>
              <img src="/gooddetail/point.png" alt="" style="width: 12px">
              <span style="font-size: 14px;color: #666">下单</span>
              <span
                  style=" display: inline-block;width: 50px;border-bottom: 1px solid #5468ff;position: relative;"></span>
              <img src="/gooddetail/point.png" alt="" style="width: 12px">
              <span style="font-size: 14px;color: #666">签订合同</span>
              <span
                  style=" display: inline-block;width: 50px;border-bottom: 1px solid #5468ff;position: relative;"></span>
              <img src="/gooddetail/point.png" alt="" style="width: 12px">
              <span style="font-size: 14px;color: #666">验号</span>
              <span
                  style=" display: inline-block;width: 50px;border-bottom: 1px solid #5468ff;position: relative;"></span>
              <img src="/gooddetail/point.png" alt="" style="width: 12px">
              <span style="font-size: 14px;color: #666">换绑</span>
              <span
                  style=" display: inline-block;width: 50px;border-bottom: 1px solid #5468ff;position: relative;"></span>
              <img src="/gooddetail/point.png" alt="" style="width: 12px">
              <span style="font-size: 14px;color: #666">完成</span>
            </el-button>
            <br>
            <span style="font-size: 14px;color: #666;margin-left: 15px">温馨提示：</span>
            <span style="font-size: 12px;color: #FFCD78">根据国家规定，禁止未成年人参与虚拟物品交易</span>
            <br>
            <el-button
                style="background-color: #ECF3FF;color: #5468ff;width: 140px;height: 45px;margin-top: 12px;position: relative;left:500px">
              咨询客服
            </el-button>
            <el-button @click="saveGood"
                style="background-color: #5468ff;color: #fff;width: 140px;height: 45px;margin-top: 12px;position: relative;left:500px">
              立即购买
            </el-button>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="border: none;height: 425px">
            <span style="font-size: 12px">
              <h2 style="color: #5468ff;position: relative;left: 90px">购号保障</h2>
              <h3 style="color: #666">四大防线 保障交易安全</h3>
               <p style="color: #999">氪金兽设立四大安全防线，通过买卖双方扫脸实名认证、签订电子合同、卖方提交包赔材料、账号黑名单筛查四大防线，保障买卖双方的合法权益，严防账号找回事件。</p>
              <h3 style="color: #666">永久包赔 找回全额退款</h3>
              <p style="color: #999"> 平台为购买包赔服务的账号提供找回包赔服务，如发生卖家找回情况，平台会介入追回账号，7天内无法追回的，全额赔付购号款和包赔费（包赔费也赔，并非只赔号款），买家0损失。 </p>
            </span>
            <img src="/gooddetail/goodsdetailssafelogo.png" width="50%"
                 style="position: relative;left: 150px;top: 25px">
          </el-card>
        </el-col>
      </el-row>
      <el-card class="select" style="height: 50px;padding: 0;margin-top: 20px;">
        <el-radio-group style="margin-bottom: 15px;width: 960px;border: none;" v-model="selectType">
          <el-radio-button class="left" value="10"
                           style="height: 50px;width: 115px;line-height: 50px;border-top-left-radius: 5px ;border-bottom-left-radius: 5px;"
                           size="large">
            游戏截图
          </el-radio-button>
          <el-radio-button class="right" value="20"
                           style="height: 50px;width: 115px;line-height: 50px;"
                           size="large">账号信息
          </el-radio-button>
        </el-radio-group>
      </el-card>
      <el-card style="margin-top: 20px">
        <span
            style=" display: inline-block;width: 30px;border-bottom: 5px solid #5468ff;transform: rotate(90deg);position: relative;border-radius: 5px /* 使用transform属性旋转线条 */"></span>
        <span style="font-size: 16px;color: #333;font-weight: bold;" v-if="selectType==10">游戏截图</span>
        <span style="font-size: 16px;color: #333;font-weight: bold" v-if="selectType==20">基本信息</span>
        <!--        游戏截图内容-->
        <div class="image-grid" v-if="selectType==10" style="margin-left: 15px">
          <div class="image-container" v-for="item in good.goodImg">
            <img :src="item" alt="" @click="toggleImage(item)" class="preview-image">
          </div>
          <!--        游戏截图弹窗-->
          <el-dialog v-model="showToggleImageDialog" style="background-color: rgba(0,0,0,0);width: 800px">
            <img :src="currentImage" alt="" class="full-image">
          </el-dialog>
        </div>
        <!--        账号信息内容-->
        <div v-if="selectType==20" style="margin-top: 8px;margin-left: 12px;font-size: 14px;color: #666">
          <div style="margin-bottom: 30px">
            <!--        账号信息内容基本信息-->
            <el-row :gutter="10">
              <el-col :span="getSpan(item.specific,item.title)" v-for="item in good.baseInfoTitleAndSpecific"
                      :key="item.title" style="margin-top: 12px">{{ item.title }} : {{ item.specific }}
              </el-col>
            </el-row>
          </div>
          <div v-for="(item, index) in good.details" :key="index" style="margin-bottom: 10px">
          <span
              style=" display: inline-block;width: 30px;border-bottom: 5px solid #5468ff;transform: rotate(90deg);position: relative;border-radius: 5px /* 使用transform属性旋转线条 */;right: 12px"></span>
            <span style="font-size: 16px;font-weight: bold;color: #333333">{{ item.title }}</span>
            <br>
            <br>
            <!--有图显示图-->
            <el-row :gutter="10">
              <el-col :span="3" v-for="sonItem in item.detailsImgAndDescribe">
                <!--            <div v-for="sonItem in item.detailsImgAndDescribe" style="display: inline-block;position: relative" >-->
                <el-card style="position: relative;" class="detailCard" v-if="cardShow(sonItem.img)">
                  <img :src="sonItem.img" alt="" style="width: 130px;">
                  <!--                   <span style="position: absolute;right:20px;top:220px;text-align: center">{{sonItem.describe}}</span>-->
                  <p style="text-align: center">{{ sonItem.describe }}</p>
                </el-card>
              </el-col>
            </el-row>
            <!--            无图显示文字-->
            <div v-for="sonItem in item.detailsImgAndDescribe">
              <el-text v-if="TextShow(sonItem.img)">{{ sonItem.describe }}</el-text>
            </div>
          </div>
        </div>

      </el-card>


      <!--            交易流程弹窗-->
      <el-dialog v-model="transactionDialog" style="width: 480px; height: 550px">
        <h2 style="margin-left: 200px;color: #303133;font-size: 18px">交易流程</h2>
        <div style="width: 400px;margin-left: 25px">
          <p style="font-size: 14px;color: #606266">因交易情况不同，验号与换绑环节顺序可能互换</p>
          <el-row :gutter="10">
            <el-col :span="6">
              <img src="/gooddetail/point.png" alt="" style="width: 12px;">
              <br>
              <span
                  style=" display: inline-block;width: 50px;border-bottom: 1px solid #5468ff;transform: rotate(90deg);position: relative;right: 19.3px;top: 15px /* 使用transform属性旋转线条 */"></span>
              <br>
              <br>
              <br>
              <img src="/gooddetail/point.png" alt="" style="width: 12px;position: relative;top:8px">
              <br>
              <span
                  style=" display: inline-block;width: 50px;border-bottom: 1px solid #5468ff;transform: rotate(90deg);position: relative;right: 19.3px;top: 22px /* 使用transform属性旋转线条 */"></span>
              <br>
              <br>
              <br>
              <img src="/gooddetail/point.png" alt="" style="width: 12px;position: relative;top:15px">
              <br>
              <span
                  style=" display: inline-block;width: 50px;border-bottom: 1px solid #5468ff;transform: rotate(90deg);position: relative;right: 19.3px;top: 29px /* 使用transform属性旋转线条 */"></span>
              <br>
              <br>
              <br>
              <img src="/gooddetail/point.png" alt="" style="width: 12px;position: relative;top:24px">
              <br>
              <span
                  style=" display: inline-block;width: 50px;border-bottom: 1px solid #5468ff;transform: rotate(90deg);position: relative;right: 19.3px;top: 36px /* 使用transform属性旋转线条 */"></span>
              <br>
              <br>
              <br>
              <img src="/gooddetail/point.png" alt="" style="width: 12px;position: relative;top:31px">
            </el-col>
            <el-col :span="18">
              <div style="position: relative;bottom: 17px">
                <p style="font-size: 14px;color: #666">下单</p>
                <p style="font-size: 12px;color: #999">下单后进入在线发货聊天界面，等待验号</p>
                <p style="font-size: 14px;color: #666">签订合同</p>
                <p style="font-size: 12px;color: #999">双方签订买卖合同</p>
                <p style="font-size: 14px;color: #666">验号</p>
                <p style="font-size: 12px;color: #999">
                  客服提供专业验号教程，由买家亲自上号验号，如发现与商品内容不符，可无责取消交易</p>
                <p style="font-size: 14px;color: #666">换绑</p>
                <p style="font-size: 12px;color: #999">确认购买后，客服将进行改密，换绑</p>
                <p style="font-size: 14px;color: #666">完成</p>
                <p style="font-size: 12px;color: #999">
                  收到帐号后请尽快登录游戏验证，如无问题将在保护期结束后给卖家打款。</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";


const good = ref({
  type: '/homecontent/yongjiewujian.png',
  id: '111',
  game: '永劫无间',
  platform: '国服邮箱',
  describe: '红皮数: 8 金皮数量: 213 版本: 终极版 神识(征神)等级: 770 英雄外观数: 739 武器外观数: 212 等级: 256 幻丝数: 9092 通行证: ' +
      '已升级 征神通行证: 已升级 征神通行证等级: 84 亮点(征神号可备注): 冰套180元素23首领4合道1化气，春雷电套1合道，160多天白泽加两张白泽月卡' +
      ' 红皮及战旗皮: 绝代风华(迦南皮肤),蝶梦(胡桃皮肤),少阳剑(长剑皮肤),化生明王(天海皮肤),泣珠龙纱(崔三娘皮肤),天琼(匕首皮肤),逆晦朔(扇皮肤),天罚(火炮皮肤)',
  createTime: '2024-06-01',
  price: 655,
  goodImg: [
    '/gooddetail/goodid111/0b9200d3-7f5d-4607-9912-68d90b59bf32.jpg',
    '/gooddetail/goodid111/2a5bf40a-2f2d-4f17-9b82-09e5cf6a025c.jpg',
    '/gooddetail/goodid111/2ea8d524-3a78-4547-bc9f-3e2696e21825.jpg',
    '/gooddetail/goodid111/3f67a94e-5a46-48d0-8aea-2feb63ba4a65.jpg',
    '/gooddetail/goodid111/6a0eef40-0f5b-4dc7-83aa-a8bfe9ba9c23.jpg',
    '/gooddetail/goodid111/6ef53d24-cec1-4041-808f-a691b43b15fa.jpg',
    '/gooddetail/goodid111/7cce39b2-3103-43d8-ba0d-d8fcafbf4873.jpg',
    '/gooddetail/goodid111/7e10fc68-f1e9-4b07-86ac-e7b29509f5ae.jpg',
    '/gooddetail/goodid111/8a4de629-6c3a-4fae-a585-9dcf07728c4b.jpg',
    '/gooddetail/goodid111/08ddd1c7-5c66-4cbe-97ee-5198ab39c671.jpg',
    '/gooddetail/goodid111/106d5bfa-313b-463e-8cee-6c83e6c5b5e3.jpg',
    '/gooddetail/goodid111/157fbb51-5d13-42b9-9be4-ef7e6065c7c2.jpg',
    '/gooddetail/goodid111/378d53fe-9403-474b-838e-081ca0b8e1ff.jpg',
    '/gooddetail/goodid111/920b988e-4eaa-441b-a686-75b9196c9ae1.jpg',
    '/gooddetail/goodid111/5357wRN5uZQT.jpg',
    '/gooddetail/goodid111/5481f447-4ba6-4d88-9832-5ee7c63f7843.jpg',
    '/gooddetail/goodid111/9740d470-4d63-4945-8dc1-ad4ab8b1abb6.jpg',
    '/gooddetail/goodid111/21900f20-afdf-4ac9-bfda-51c3661523c5.jpg',
    '/gooddetail/goodid111/73949bc0-f0d3-4f4b-b27c-8f0b1ab1656a.jpg',
    '/gooddetail/goodid111/0076101b-3fde-4317-92c9-56e5d0288893.jpg',
    '/gooddetail/goodid111/0462573a-0a4a-498c-b596-5d23be12237d.jpg',
    '/gooddetail/goodid111/767421e9-d27c-4281-8e3c-72a69379bb76.jpg',
    '/gooddetail/goodid111/928677be-3772-472f-bb62-ac6959b586df.jpg',
    '/gooddetail/goodid111/9811254b-ac4c-43e0-a97d-a189f4e9976d.jpg',
    '/gooddetail/goodid111/a60f594e-f5b6-4203-9ada-885f3b67d111.jpg',
    '/gooddetail/goodid111/af244450-98c6-4e9d-b59d-3daf8b0e51a5.jpg',
    '/gooddetail/goodid111/b1fcf355-2b66-4d4c-99d3-9c01897d06ce.jpg',
    '/gooddetail/goodid111/c15ed3a7-1212-4d61-866e-b38f98b26540.jpg',
    '/gooddetail/goodid111/c976cef7-79ab-44bd-8c33-75f536bb0de4.jpg',
    '/gooddetail/goodid111/c68540cc-3692-42a2-9064-d656c809e6db.jpg',
    '/gooddetail/goodid111/ce8edaba-b0ee-4c07-8e15-a3916ad08a94.jpg',
    '/gooddetail/goodid111/dc97732b-213f-4718-9af9-90782d308d84.jpg',
    '/gooddetail/goodid111/df170983-2744-4b86-8c99-83f5f4c8c348.jpg',
    '/gooddetail/goodid111/e4c7f430-ccdc-42d5-b031-2839db28cbb4.jpg',
    '/gooddetail/goodid111/ebefbea1-35fd-46ea-8f92-ea46bf56d36c.jpg',
    '/gooddetail/goodid111/f1e60122-dc10-4c3d-8110-2561443bf263.jpg',
    '/gooddetail/goodid111/f7827af5-08e1-4a2c-a503-dff436079a96.jpg',
    '/gooddetail/goodid111/fb5bd436-f689-4cf8-94b4-8bb4a2805803.jpg',
    '/gooddetail/goodid111/fe242c46-2ba6-431d-9494-b80eb74f7757.jpg',
  ],
  baseInfoTitleAndSpecific: [
    {title: '版本', specific: '终极版'},
    {title: '等级', specific: '256'},
    {title: '幻丝数', specific: '9092'},
    {title: '段位', specific: '无双修罗'},
    {title: '通行证', specific: '已升级'},
    {title: '亮点(征神号可备注)', specific: '冰套180元素23首领4合道1化气，春雷电套1合道，160多天白泽加两张白泽月卡'},
    {title: '红皮数', specific: '8'},
    {title: '金皮数量', specific: '213'},
    {title: '神识(征神)等级', specific: '770'},
    {title: '征神通行证', specific: '已升级'},
    {title: '征神通行证等级', specific: '84'},
  ],
  details: [
    {
      title: '红皮及战旗皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/3750wnYMBwS4.jpg', describe: '泣珠龙纱(崔三娘皮肤)'},
        {img: '/gooddetail/goodid111/detailsImg/3636JxtubtBL.jpg', describe: '化生明王(天海皮肤)'},
        {img: '/gooddetail/goodid111/detailsImg/3532qwF9lz85.jpg', describe: '蝶梦(胡桃皮肤)'},
        {img: '/gooddetail/goodid111/detailsImg/3517Ivxpv6qX.jpg', describe: '绝代风华(迦南皮肤)'},
        {img: '/gooddetail/goodid111/detailsImg/3910UiwBRt5M.jpg', describe: '天罚(火炮皮肤)'},
        {img: '/gooddetail/goodid111/detailsImg/39310KUh4Lcp.jpg', describe: '逆晦朔(扇皮肤)'},
        {img: '/gooddetail/goodid111/detailsImg/3938080AfBlg.jpg', describe: '天琼(匕首皮肤)'},
        {img: '/gooddetail/goodid111/detailsImg/4008Y4gzTbUS.jpg', describe: '少阳剑(长剑皮肤)'},
      ]
    },
    {
      title: '飞索金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/0257dUlWKItN.jpg', describe: '暗香'},
      ]
    },
    {
      title: '宁叶红金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/0445reZqdJBl.jpg', describe: '夏日派对·午后瑰夏'},
        {img: '/gooddetail/goodid111/detailsImg/0524OZCOHrYY.jpg', describe: '龙之道·自知'},
        {img: '/gooddetail/goodid111/detailsImg/0712JF6E91Ar.jpg', describe: '夜华朝'},
      ]
    },
    {
      title: '特木尔金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/20502DsNesxB.jpg', describe: '追猎'},
        {img: '/gooddetail/goodid111/detailsImg/2209gxDZd65b.jpg', describe: '斗罗大陆·唐三'},
        {img: '/gooddetail/goodid111/detailsImg/2218z9opva9d.jpg', describe: '护世四法·多闻天王'},
      ]
    },
    {
      title: '迦南金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/2507n1LE4TCG.jpg', describe: '观山海·青鸟'},
        {img: '/gooddetail/goodid111/detailsImg/58130My1tMLd.jpg', describe: '千秋匠心·玉叶景'},
      ]
    },
    {
      title: '季沧海金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/3013rBuVPhi7.jpg', describe: '观山海·夏神祝融'},
        {img: '/gooddetail/goodid111/detailsImg/5835z2haxSnl.jpg', describe: '巨阙'},
      ]
    },
    {
      title: '胡桃金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/5038oAA7tJOx.jpg', describe: '御宅罗梦(白丝)'},
        {img: '/gooddetail/goodid111/detailsImg/5120qTDznU5p.jpg', describe: '贵胄少女'},
      ]
    },
    {
      title: '天海金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/3850uIBJqaHB.jpg', describe: '八宝龙王'},
        {img: '/gooddetail/goodid111/detailsImg/3753Gex9k2ZH.jpg', describe: '武道无穷·少林'},
      ]
    },
    {
      title: '妖刀姬金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/3811zcN1rKSA.jpg', describe: '妖刀姬'},
        {img: '/gooddetail/goodid111/detailsImg/0257OtXWdCkG.jpg', describe: '流火映真'},
      ]
    },
    {
      title: '岳山金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/4558yB4Kl9Ay.jpg', describe: '龙之影·过江龙'},
        {img: '/gooddetail/goodid111/detailsImg/4848OZLnnJhO.jpg', describe: '弘毅袍'},
        {img: '/gooddetail/goodid111/detailsImg/2655qvKr62nx.jpg', describe: '长歌诗韵·戍关将'},
      ]
    },
    {
      title: '顾清寒金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/5529hAtp87rz.jpg', describe: '赤丹朱湛'},
      ]
    },
    {
      title: '无尘金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/5236tUfpErh4.jpg', describe: '司天命'},
      ]
    },
    {
      title: '殷紫萍金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/4133GChnFiSu.jpg', describe: '新倩女幽魂·瑶光沐月'},
        {img: '/gooddetail/goodid111/detailsImg/3901INLmQCao.jpg', describe: '智绘·萍之缘'},
      ]
    },
    {
      title: '武田信忠金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/0231tYLRGdmg.jpg', describe: '麟鹿大铠'},
        {img: '/gooddetail/goodid111/detailsImg/0645jY6UTos3.jpg', describe: '花之倾奇'},
      ]
    },
    {
      title: '胡为金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/57201ftlQfrs.jpg', describe: '观山海·秋神蓐收'},
      ]
    },
    {
      title: '沈妙金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/4704i3tnmaCG.jpg', describe: '绮云衫'},
      ]
    },
    {
      title: '季莹莹金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/0006oWbJNHAC.jpg', describe: '观山海·冬神玄冥'},
        {img: '/gooddetail/goodid111/detailsImg/5738wLi1b2m8.jpg', describe: '干将莫邪'},
      ]
    },
    {
      title: '玉玲珑金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/5914wh3jzUWo.jpg', describe: '观山海·冬神玄冥'},
        {img: '/gooddetail/goodid111/detailsImg/3541jyqNHr9g.jpg', describe: '春日序曲·赤羽'},
      ]
    },
    {
      title: '哈迪金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/01355yQoDsTT.jpg', describe: '夜绸袍'},
      ]
    },
    {
      title: '魏轻金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/0159nNlRYT7t.jpg', describe: '正法袍'},
      ]
    },
    {
      title: '长剑金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/0746I5hLmvsO.jpg', describe: '破劫·腾云'},
      ]
    }, {
      title: '太刀金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/1108sSsTsXbH.jpg', describe: '数珠丸'},
      ]
    },
    {
      title: '阔刀金皮', detailsImgAndDescribe: [
        {img: '/gooddetail/goodid111/detailsImg/0545o6LrxxsP.jpg', describe: '破天'},
      ]
    },
    {
      title: '饰品金皮', detailsImgAndDescribe: [
        {
          img: '',
          describe: '饰品金皮 : 豹耳（宁红叶头部）,业火残红笛(宁红夜腰饰),豹尾(宁红夜后腰),雾隐繁花(宁红夜面具),福虎帽（胡桃头部）,青莲唤云铃（天海右后腰）,妖刀姬（妖刀姬娃娃）,婵娟（崔三娘背饰）,鲛人角（崔三娘头部）,凯旋盔（岳山头部）,卧龙·吕布铁面（胡为面部）,观山海·冬棱(季莹莹头部),观山海·秋金(胡为头部),癸卯(宁红夜左前腰),金辉袋(季沧海左前腰),日晷仪(无尘右后腰),系云澜(沈妙头部),醉狐银(玉玲珑面部),琉璃火(季莹莹右前腰),长歌诗韵·琵琶梳(迦南右前腰),桃夭扇(殷紫萍右前腰),暖冬帽·男,暖冬帽·女,雁落笠(宁红夜头部),武道无穷·明心(天海右后腰),曜石面具(哈迪面部),染红纱(宁红叶头部),玄天冠(魏轻头部),银雪(顾清寒头部),甲辰龙(季沧海头部),叠嶂宝鉴(魏轻左前腰),碎釜(季沧海右后腰),窥鲸镜(哈迪右前腰),避彩(魏轻面部),楚韵九歌·灵皇（哈迪面部）,熔金峰（刘炼右前腰）'
        },
      ]
    },
    {
      title: '发型金皮', detailsImgAndDescribe: [
        {
          img: '',
          describe: '发型金皮 : 翔鸾（迦南发型）,朝颜（迦南发型）,逆水寒·江海（季沧海发型）,逍遥（无尘发型）,【挑染】冰羽（顾清寒）,伏苓（殷紫萍）,观山海·青鸾(迦南发型),观山海·冥泉(季莹莹发型),观山海·天刑(胡为发型),不蛊(玉玲珑发型),流萤(玉玲珑发型),韶光(沈妙发型),古溪(玉玲珑发型),【挑染】暮落(殷紫萍发型),月丹(胡桃发型),霜天(顾清寒发型),簪缨(宁红夜发型),斗罗大陆·海神(特木尔发型),含锋(季沧海发型),缱绻(季莹莹发型)'
        },
      ]
    },
  ]
});
// onMounted(()=>{
//   let id = new URLSearchParams(location.search).get('id')
//   //一进此页面,立即加载本条微博的评论数据,参数为当前微博的id
//   loadGood(id);
// })

//加载商品
const loadGood = ()=>{
  axios.get(BASE_URL + '/v1/good/select/?id='+id).then((response)=>{
    if (response.data.code == 2000) {
      good.value = response.data.data[0];
    } else {
      ElMessage.error(response.data.msg)
    }
  })
}
//存储商品
const saveGood = () => {
  let data = good.value;
  axios.post(BASE_URL + '/v1/good/save/', data).then((response) => {
        if (response.data.code == 2000) {
          console.log(data)
          ElMessage.success('保存成功!')
        } else {
          ElMessage.error(response.data.msg)
        }
      }
  )
}

//选择账号信息还是图片截图
const selectType = ref(10);
//图片显示
const showToggleImageDialog = ref(false);
const currentImage = ref('');

const toggleImage = (imageSrc) => {
  currentImage.value = imageSrc;
  showToggleImageDialog.value = true;
};


const transactionDialog = ref(false)
const showTransactionDialog = () => {
  transactionDialog.value = true;
}
//基本信息间距控制
const getSpan = (title, specific) => {
  let theLength = title.length + specific.length
  // 假设每个字符宽度为 14 像素
  let characterWidth = 14;
  // 假设屏幕宽度为 1200 像素
  let screenWidth = 1200;
  // 屏幕宽度的一半
  let halfScreenWidth = screenWidth / 2;
  // 如果 specific 的长度超过屏幕宽度的一半
  if (theLength * characterWidth > halfScreenWidth) {
    return 24; // 占一整行
  } else {
    return 12; // 占半行
  }
}

const cardShow = (img) => {
  if (img != '' && img != null) {
    return true
  } else {
    return false
  }
}
const TextShow = (img) => {
  if (img == '' || img == null) {
    return true
  } else {
    return false
  }
}
</script>

<style scoped>
.center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 将内容靠近顶部 */
  min-height: 100vh;
  background-color: #f0f0f0;
  padding: 20px 0; /* 上下内边距减少到 20px */
  background-color: rgba(0, 0, 0, 0);
}

.content-container {
  width: 75%;
  max-width: 1200px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0);
}

.nav-button {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  margin: 0 10px;
}

/*调整选项样式*/
/*按钮设置*/
/deep/ .el-radio-button__inner {
  border: none !important;
  //border: 1px solid ;
  outline: none;
  border-radius: 3px;
  width: 114px;
  background-color: transparent;
  font-weight: bold;
  height: 50px;
  line-height: 25px;
}

/*
废弃样式设置
/deep/ .left .el-radio-button__inner {
  background-color:rgba(0,0,0,0) !important;
  border: none;
  border-radius: 0px !important;
  color: #333333;
}

/deep/ .left .el-radio-button-checked-border-color {
  border-color: rgba(0,0,0,0);
  border: none;
}

/deep/ .left .el-radio-button__original-radio:checked + .el-radio-button__inner {
  border-color: rgba(0,0,0,0);
  border: none;
}
!*右*!
!*激活状态*!
/deep/ .right .el-radio-button__inner {
  background-color: rgba(0,0,0,0) !important;
  border: none;
  border-radius: 0px !important;
  color: #333333;
}

/deep/ .right .el-radio-button-checked-border-color {
  border-color: rgba(0,0,0,0);
  border: none;
}


/deep/.right .el-radio-button__original-radio:checked + .el-radio-button__inner {
  border-color: rgba(0,0,0,0);
  border: none;
}*/
/deep/ .right .el-radio-button {
  background: black;
}

/deep/ .select .el-card__body {
  height: 50px;
  padding: 0px;
  border: none;
}

/deep/ .select .el-radio-group {
  border: none !important;
}

/deep/ .el-card {
  --el-card-border-color: rgba(0, 0, 0, 0);
  border: none
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 图片之间的间隔 */
  margin-top: 20px;
}

.image-container {
  flex: 0 0 calc(50% - 5px); /* 让每个图片容器占据一行的一半，并减去间隔 */
  overflow: hidden;
  cursor: pointer;
}

/*原图显示*/
.preview-image {
  width: 100%;
  height: 300px; /* 设置固定高度 */
  object-fit: cover; /* 保持长图比例并填充容器 */
  object-position: center; /* 居中显示 */
}

/*弹窗图片显示*/
.full-image {
  width: 100%;
  height: auto;
}

/deep/ .detailCard .el-card__body {
  box-shadow: none !important;
  padding: 0 !important;
}

/deep/ .is-always-shadow {
  box-shadow: none !important;
}
</style>
